<template>
    <div class="fluid">
        <div class="container">
          <p><img src="../../assets/img/indexHeader/1.png" alt="" class="imgOne" @click="routeIndex"></p>
            <div class="left">
                <p>高效率流量整合+AI智投营销平台 = 一站式营销方案</p>
                <img src="../../assets/img/登陆注册/3.png">
                <p>联系我们，免费获取营销方案</p>
            </div>
            <div class="right">
                <div class="rightContainer">
                    <ul>
                        <li>
                            <a href="javascript:;">找回密码</a>
                        </li>
                    </ul>
                    <div class="loginYzm">
                        <p>
                            <input type="text" v-model="val1" placeholder="请输入手机号" @focus="focus1" @blur="inputBlur" name="mobile" :class="{phClass: inputFocusName == 'mobile'}">
                            <span>中国+86 &nbsp;|</span>
                        </p>
                        <p>
                            <input type="text" v-model="val3" placeholder="请输入6位短信验证码" @focus="focus3" @blur="inputBlur" name="code" :class="{phClass: inputFocusName == 'code'}">
                            <button @click="sendyzm" v-if="yzmtime" class="sendyzm">发送验证码</button>
                            <button v-if="djstime" disabled class="btnyzm">{{time}}s后发送</button>  
                        </p>
                        <p>
                            <input type="password" v-model="val2" placeholder="新密码为6-16位密码(字母/数字组合)" @focus="focus2" @blur="inputBlur" name="password" :class="{phClass: inputFocusName == 'password'}">
                        </p>
                        <p>
                            <!-- <img src="../../assets/img/登陆注册/登录/√2.png" alt="" style="margin-top:-5px;">
                            <span>我已阅读并接受<a href="javascript:;">《美辰服务条款》</a></span> -->
                        </p>
                        <button @click="regist">确认提交新密码</button>
                        <p>
                            <span>已经注册？<a href="javascript:;" @click="login">马上登陆</a></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      // mobile
      val1: "",
      // password
      val2: "",
      // yyz
      val3: "",
      reg: /^[1][3,4,5,7,8][0-9]{9}$/,
      reg2: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
      time: 60,
      yzmtime: true,
      djstime: false,
      inputFocusName : ''
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    sendyzm() {
      if (this.val1 && this.reg.test(this.val1)) {
        this.yzmtime = false;
        this.djstime = true;
        var Time = setInterval(() => {
          this.time--;
          if (this.time == 0) {
            window.clearInterval(Time);
            this.time = 60;
            this.yzmtime = true;
            this.djstime = false;
          }
        }, 1000);
        this.$ajax
          .post(this.Ipurl + "user/getVerifyCode", {
            mobile: this.val1,
            templateCode: "SMS_142616217"
          })
          .then(res => {
            if (res.data.returnCode == 1000) {
              this.$message.success("请注意查收！！！");
            } else {
              this.$message.error(res.data.message);
            }
          });
      } else {
        this.$message.error("手机号为11位并且不能为空");
      }
    },
    regist() {
      if (this.val1 == "") {
        this.$message.error("手机号不能为空");
      } else if (this.val2 == "") {
        this.$message.error("密码不能为空");
      } else if (!this.reg.test(this.val1)) {
        this.$message.error("手机号格式不对");
        this.val1 = "";
      } else if (!this.reg2.test(this.val2)) {
        this.$message.error("密码6-16位字母加数字");
        this.val2 = "";
      } else if (this.val3.length < 6) {
        this.$message.error("短信验证码位6位");
      } else {
        this.$ajax
          .post(this.Ipurl + "user/findPassword", {
            mobile: this.val1,
            password: md5(this.val2),
            validateCode: this.val3
          })
          .then(res => {
            if (res.data.returnCode == 1005) {
              this.$message.error(res.data.message);
              this.val1 = "";
              this.val2 = "";
              this.val3 = "";
            } else if (res.data.returnCode == 1000) {
              this.$confirm("密码成功找回", "nice", {
                confirmButtonText: "立即登陆",
                cancelButtonText: "过会儿登陆",
                type: "success"
              }).then(() => {
                this.$router.push("/login");
              });
            }
          });
      }
    },
    focus1(e) {
      this.$message("请输入真实的11位手机号");
      this.inputFocusName = e.target.name;
    },
    focus2(e) {
      this.$message("请输入6-16位数字+字母的密码");
      this.inputFocusName = e.target.name;
    },
    focus3(e) {
      this.$message("验证码为6位");
      this.inputFocusName = e.target.name;
    },
    routeIndex() {
      this.$router.push({ path: "/" });
    },
    inputBlur(){
      this.inputFocusName = '';
    }
  }
};
</script>
<style scoped>
.fluid {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/登陆注册/2.png");
  background-color: #f8f9fd;
  position: absolute;
}
.imgOne {
  margin-top: 40px;
}
.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.left {
  float: left;
  position: relative;
}
.left > p:nth-child(1) {
  font-size: 30px;
  color: rgb(34, 34, 34);
  margin-top: 261px;
}
.left > img:nth-child(2) {
  margin-top: 27px;
}
.left > p:nth-child(3) {
  font-size: 18px;
  color: #fff;
  position: absolute;
  left: 22px;
  top: 331px;
}
.right {
  float: right;
  width: 432px;
  height: 561px;
  background: #fff;
  margin-top: 100px;
}
.rightContainer {
  width: 352px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 80px;
}
.rightContainer > ul > li {
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(204, 204, 204);
  background: url("../../assets/img/登陆注册/注册/5.png") no-repeat bottom;
}
.rightContainer > ul > li > a {
  font-size: 24px;
  color: rgb(34, 34, 34);
  font-family: PingFang SC;
}
.loginYzm > p:nth-child(1) {
  position: relative;
}
.loginYzm > p:nth-child(1) > span {
  position: absolute;
  top: 13px;
  left: 23px;
  font-size: 16px;
  color: rgb(204, 204, 204);
}
.loginYzm > p:nth-child(1) > input {
  width: 100%;
  height: 48px;
  padding-left: 120px;
  font-size: 16px;
  color:gray;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
}
.loginYzm > p:nth-child(2) > input {
  width: 220px;
  height: 48px;
  padding-left: 20px;
  font-size: 16px;
  color:gray;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
}
input::-webkit-input-placeholder{
            color: #c6c6c6;
        }
.loginYzm > p:nth-child(3) > input {
  width: 100%;
  height: 48px;
  padding-left: 20px;
  font-size: 16px;
  color:gray;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
}
.loginYzm > p:nth-child(2) > button {
  width: 120px;
  height: 48px;
  color: #fff;
  background: rgb(237, 64, 64);
  font-size: 14px;
  border-radius: 5px;
}
.loginYzm > button {
  width: 100%;
  height: 50px;
  margin-top: 30px;
  color: #fff;
  background: rgb(237, 64, 64);
  font-size: 18px;
  border-radius: 5px;
}
.loginYzm > p:nth-child(1) {
  margin-top: 60px;
}
.loginYzm > p:nth-child(2) {
  margin-top: 30px;
}
.loginYzm > p:nth-child(3) {
  margin-top: 30px;
}
/* .loginYzm > p:nth-child(4) {
  margin-top: 30px;
} */
.loginYzm > p:nth-child(5) {
  margin-top: 30px;
}
.loginYzm > p:nth-child(6) {
  margin-top: 30px;
  float: right;
}
.loginYzm > p:nth-child(4) > span {
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.loginYzm > p:nth-child(4) > span > a {
  color: rgb(237, 64, 64);
}
.loginYzm > p:nth-child(6) > span {
  font-size: 18px;
  color: rgb(204, 204, 204);
}
.loginYzm > p:nth-child(6) > span > a {
  color: rgb(237, 64, 64);
  font-weight: bold;
}
.loginYzm > p:nth-child(4) > span {
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.loginYzm > p:nth-child(4) > a {
  float: right;
  font-size: 18px;
  color: rgb(204, 204, 204);
}


.phClass::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: transparent
}
.phClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent
}
.phClass::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent
}
.phClass:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: transparent
}
</style>